<template>
  <avue-crud :option="option" :data="data" :page.sync="page" :before-open="beforeOpen" v-model="form" ref="crud"
             @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @refresh-change="refreshChange"
             @on-load="onLoad">
    <template slot="menuForm">
      <el-button type="primary" size="medium" @click="handleTest()">测试连接</el-button>
    </template>
    <template slot="menu" slot-scope="{row,size,type}">
      <el-button icon="el-icon-check" :size="size" :type="type" @click="handleTest(row)">测试连接</el-button>
    </template>
  </avue-crud>
</template>

<script>
import {getList, getDetail, add, update, remove, dbTest} from "@/api/db";

const dicData = [
  {
    label: 'MySQL',
    value: 'com.mysql.cj.jdbc.Driver',
    url: 'jdbc:mysql://127.0.0.1:3306/micro_cloud?characterEncoding=UTF-8&useSSL=true&serverTimezone=Asia/Shanghai&useInformationSchema=true'
  }, {
    label: 'ClickHouse',
    value: 'ru.yandex.clickhouse.ClickHouseDriver',
    url: 'jdbc:clickhouse://47.109.150.3:20010/jobanalysis_dws'
  },{
    label: 'SqlSqlServerServer',
    value: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
    url: 'jdbc:sqlserver://192.168.1.66:1433;DatabaseName=misboot_cloud_vue_sqlserver'
  }, {
    label: 'PostgreSQL',
    value: 'org.postgresql.Driver',
    url: 'jdbc:postgresql://192.168.1.203:5432/misboot_cloud_vue_postgresql'
  }, {
    label: 'Oracle',
    value: 'oracle.jdbc.OracleDriver',
    url: 'jdbc:oracle:thin:@192.168.1.206:1521:ZUOYOUR'
  }, {
    label: '达梦数据库',
    value: 'dm.jdbc.driver.DmDriver',
    url: 'jdbc:dm://192.168.1.203:5236/misboot_cloud_vue_dm'
  }, {
    label: '人大金仓数据库',
    value: 'com.kingbase8.Driver',
    url: 'jdbc:kingbase8://192.168.1.203:54321/misboot_cloud_vue_kingbase'
  }
]
export default {
  data() {
    return {
      isEdit: false,
      form: {},
      query: {},
      page: {
        pageNum: 1,
        pageSize: 20,
        totalCount: 0,
      },
      option: {
        index: true,
        copyBtn: true,
        labelWidth: 110,
        menuWidth: 280,
        column: [
          {
            label: "名称",
            prop: "name",
            width: 120,
            rules: [{
              required: true,
              message: "请输入数据源名称",
              trigger: "blur"
            }]
          },
          {
            label: "类型",
            prop: "driverClass",
            type: 'select',
            dicData: dicData,
            width: 200,
            rules: [{
              required: true,
              message: "请选择类型",
              trigger: "blur"
            }]
          },
          {
            label: "用户名",
            prop: "username",
            width: 120,
            rules: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            }]
          },
          {
            label: "密码",
            prop: "password",
            type: 'password',
            hide: true,
            rules: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            }]
          },
          {
            label: "连接地址",
            prop: "url",
            type: 'textarea',
            span: 24,
            rules: [{
              required: true,
              message: "请输入连接地址",
              trigger: "blur"
            }]
          },
          {
            label: "备注",
            prop: "remark",
            span: 24,
            minRows: 3,
            hide: true,
            type: "textarea"
          },
        ]
      },
      data: []
    };
  },
  watch: {
    'form.driverClass'(val) {
      if (this.isEdit) {
        this.isEdit = false;
        return
      }
      let obj = dicData.find(ele => ele.value == val) || {}
      this.form.url = obj.url
    }
  },
  methods: {
    vaildData(id) {
      return [0, 1, 2, 3].includes(id)
    },
    rowSave(row, done) {
      add(row).then((res) => {

        if (200 == res.code) {
          this.$message.success(res.msg);
          this.onLoad();
          done();
        } else {
          this.$message.error(res.msg);
          done();
        }


      }, error => {
        window.console.log(error);
        this.loading();
      });
    },
    rowUpdate(row, index, done) {
      update(row).then((res) => {
        if (200 == res.code) {
          done();
          this.onLoad();
          this.$message({
            type: "success",
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      }, error => {
        window.console.log(error);
        this.loading();
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return remove(row.uuid);
          })
          .then(() => {
            this.onLoad();
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });

    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.uuid).then(res => {
          this.form = res.data;
        });
      }
      this.isEdit = true;
      done();
    },
    refreshChange() {
      this.onLoad();
    },
    handleTest(form) {
      form = form || this.form
      dbTest({
        driverClass: form.driverClass,
        url: form.url,
        username: form.username,
        password: form.password
      }).then(res => {
        // const data = res.data;
        if (200 == res.code) {
          this.$message.success('连接成功')
        } else {
          this.$message.error('连接失败，请检查相关配置参数')
        }
      })
    },
    onLoad() {
      getList({
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      }).then(res => {
        const data = res.rows;
        this.page.totalCount = data.total;
        this.data = data;
      });
    }
  }
};
</script>

<style>
.avue-crud {
  box-sizing: border-box;
}
</style>
